<!--创建时间：2022/3/31 13:54 描述： -->
<template>
  <view class="console-class">
    <view
      class="head-area"
    >
      <button
        class="tool-button"
        @click="onClearLogs"
      >清空</button>
      <button
        class="tool-button"
        @click="refresh"
      >刷新</button>
      <uni-easyinput
        placeholder="过滤key"
        v-model="filter"
      />
    </view>
    <scroll-view class="scroll" :scroll-y="true" :scroll-top="scrollTop" @scroll="scrollEvent">
      <view v-for="(item,index) in storageListFilter" :key="index">
        <view
          class="btns"
        >
          <button
            class="tool-button"
            @click="copy(item.obj)"
          >复制</button>
          <button
            class="tool-button"
            @click="del(item.key)"
          >删除</button>
          <button
            class="tool-button"
            @click="editFun(item.key,item.obj)"
          >编辑</button>
        </view>
        <view class="console-content">
          <view>key</view>
          <view>{{ item.key }}</view>
          <view>value</view>
          <view>{{ item.obj }}</view>
        </view>
      </view>
    </scroll-view>
    <uni-popup ref="popupRef">
      <view class="edit">
        <view class="btns">
          <button @click="stickUp">粘贴</button>
          <button @click="submit">确定</button>
        </view>
        <uni-easyinput v-model="edit.value"/>
      </view>
    </uni-popup>
    <uni-popup ref="delRef">
      <view class="btns">
        <button @click="delFalse">取消</button>
        <button @click="delTrue">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {ClipboardUtils, getDate} from "../common.js";
import typeOfUtils from "@/utils/type-of-utils";
export default {
  name: "ComponentsStorge",
  // 定义用到的组件
  components: {},
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins:[],
  // 属性定义使用对象的形式进行定义
  // 定义变量
  data() {
    return {
      storageList: [],
      scrollTop: 0,
      deleteKey: '',
      filter: '',
      edit: {
        key: '',
        value: ''
      }
    }
  },
  // 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
  computed: {
    storageListFilter() {
      if (this.filter) {
        return this.storageList.filter(i => {
          return i.key.indexOf(this.filter) !== -1
        })
      }
      return this.storageList;
    },
    // consoleProps2: {
    //		get(){
    //			//return this.name.split('').reverse().join('');
    //			return this.firstName+''+this.lastName;
    //		},
    //		set(value){
    //		}
    // }
  },
  // 监听属性值的变化
  watch:{
    // consoleProps2: {
    //   handler(value, oldValue) {
    //
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  // 生命周期钩子函数begin
  // 在页面节点挂载完执行
  mounted() {
  },
  // 在页面创建完执行
  created() {
    this.refresh().finally(()=>{
      this.$set(this, 'scrollTop', getDate().srollTop.storge)
    })
  },
  // 生命周期钩子函数end
  // 定义方法
  methods: {
    refresh() {
      return new Promise((resolve, reject) => {
        uni.getStorageInfo({
          success: (res) => {
            this.storageList = [];
            res.keys.forEach(item => {
              this.storageList.push({
                key: item,
                obj: uni.getStorageSync(item)
              })
            })
            resolve()
          },
          fail: () => {
            reject()
          }
        })
      })
    },
    onClearLogs() {
      this.storageList = [];
    },
    copy(val) {
      ClipboardUtils.setClipboardText(val)
    },
    editFun(val,obj) {
      this.$refs.popupRef.open()
      this.edit.key = val
      if(typeOfUtils.isNotObject(obj)){
        this.edit.value = obj
      } else {
        this.edit.value = JSON.stringify(obj)
      }
    },
    submit() {
      uni.setStorageSync(this.edit.key, this.edit.value)
      this.refresh()
      this.$refs.popupRef.close()
    },
    stickUp() {
      const text = ClipboardUtils.getClipboardText()
      text.then(data => {
        this.$set(this.edit, 'value', data)
      })
    },
    del(key) {
      this.$refs.delRef.open()
      this.deleteKey = key
    },
    delFalse(){
      this.$refs.delRef.close()
    },
    delTrue() {
      uni.removeStorageSync(this.deleteKey)
      this.delFalse()
      this.refresh()
    },
    scrollEvent(event) {
      this.scrollTop = event.detail.scrollTop
      getDate().srollTop.storge = this.scrollTop
    }
  },
}
</script>
<style scoped lang="scss">
.console-class{
  @import "../common.scss";
  .btns {
    display: flex;
    justify-content: space-between;
  }
  .console-content{
    border-bottom: 16px yellow solid;
  }
  .edit{
    background-color: white;
  }
}
</style>
